<template>
  <div class="supplier-audit">
    <div class="title-tip" style="margin-top: 0;">基础信息</div>
    <el-divider />
    <ul class="form-data" v-loading="tableLoading">
      <li>
        <p class="label">会员名称</p>
        <div class="value">
          {{formData.username}}
          <span style="margin: 0 5px">
            <el-tag v-if="!formData.pid" type="primary">主账号</el-tag>
            <el-tag v-else type>子账号</el-tag>
          </span>
          <el-tag v-if="formData.forbidState == 0" type="success">启用中</el-tag>
          <el-tag v-else type="danger">已禁用</el-tag>
        </div>
      </li>
      <li>
        <p class="label">联系方式:</p>
        <div class="value">{{formData.account}}</div>
      </li>
      <li>
        <p class="label">邮箱地址:</p>
        <div class="value">{{formData.vipEmail}}</div>
      </li>
      <div class="title-tip">
        供应商信息
        <span class="time" style="font-size: 14px;color: #666;font-weight: normal;" v-if="formData.state == 2 || formData.state == 4">(年检有效期:{{formData.inspectTime || '-'}})</span>
      </div>
      <el-divider />
      <li>
        <p class="label">企业名称</p>
        <div class="value">{{formData.enterpriseName}}</div>
        <span style="margin: 0 5px">
          <el-tag type="danger" v-if="formData.state == 1">待年检</el-tag>
          <el-tag type="success" v-else-if="formData.state == 2">已年检</el-tag>
          <el-tag type="info" v-else-if="formData.state == 3">
            <el-tooltip class="box-item" effect="dark" :content="formData.rejectMsg" placement="top">
              <span>
                未通过
                <i class="iconfont pass-icon">&#xe8c8;</i>
              </span>
            </el-tooltip>
          </el-tag>
          <el-tag type="info" v-else-if="formData.state == 4">已过期</el-tag>
        </span>
        <el-tag v-if="formData.isBlack == 2" type="danger">已拉黑</el-tag>
      </li>
      <li>
        <p class="label">统一社会信用代码:</p>
        <div class="value">{{formData.creditCode}}</div>
      </li>

      <li>
        <p class="label">法定代表人:</p>
        <div class="value">{{formData.legalRepresentative}}</div>
      </li>
      <li>
        <p class="label">企业住所:</p>
        <div class="value">{{formData.address}}</div>
      </li>
      <li v-if="formData.issuingTime">
        <p class="label">营业执照期限:</p>
        <div class="value">{{formData.runTime}}</div>
      </li>

      <div class="title-tip">同企业账号</div>
      <el-divider />
      <RuifoxTable :loading="tableLoading" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #username="{element}">
          <span type="success" v-if="!element.pid">
            {{element.username}}
            <el-tag type="primary">主账号</el-tag>
          </span>
        </template>
        <template #forbidState="{element}">
          <el-tag type="success" v-if="element.forbidState == 0">正常</el-tag>
          <el-tag type="danger" v-if="element.forbidState == 1">已禁用</el-tag>
        </template>
        <template #options="{element}">
          <div class="table-td-option unmover">
            <el-button type="primary" v-if="element.forbidState == 0" link @click="handleVendorEdit('state', 1, element)">禁用</el-button>
            <el-button type="primary" v-if="element.forbidState == 1" link @click="handleVendorEdit('state', 0, element)">启用</el-button>
          </div>
        </template>
      </RuifoxTable>
      <PaginationViewSimple :total="queryData.total" :pageSize="queryData.pageSize" :currentPage="queryData.currentPage" @changeSize="handleSizeChange" @currentChange="handleCurrentChange" />
    </ul>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs } from 'vue'
import { userSelectInfo, selectPageByEnterpriseId, updateUserState } from '@/api/bidding'
import { ElMessageBox, ElMessage } from 'element-plus'

const props = defineProps({
  curRow: {
    type: Object,
    default: () => {},
  },
  curBtnType: {
    type: Number,
    default: 1,
  },
})
const { curRow } = toRefs(props)
console.log('curRow', curRow.value)

let formData = reactive({})

const tableLoading = ref(false)
const getSupplierInfo = async () => {
  tableLoading.value = true
  let res = await userSelectInfo({ id: curRow.value.id }).finally(() => {
    tableLoading.value = false
  })
  if (res.code == 20000) {
    Object.assign(formData, res.data)
    getTableData()
  }
}
getSupplierInfo()

// 同企业账号
const fieldList = ref([
  {
    title: '会员名称',
    name: 'username',
  },
  {
    title: '是否禁用',
    name: 'forbidState',
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options',
  },
])
const queryData = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  // pid: curRow.value.pid,
  // id: curRow.value.id,
  // keyWords: '',
  enterpriseId:  curRow.value.enterpriseId,
})
// 获取列表
const tableData = ref([])
const tableDataLoading = ref(false)
const getTableData = async () => {
  tableData.value = []
  tableDataLoading.value = true
  console.log('queryData.value', queryData.value)
  console.log('curRow.value', curRow.value)
  let res = await selectPageByEnterpriseId(queryData.value).finally(() => (tableDataLoading.value = false))
  tableData.value = res.data.list
  queryData.value.total = res.data.total
  tableDataLoading.value = false
}
const handleSizeChange = (val) => {
  queryData.value.currentPage = 1
  queryData.value.pageSize = val
  getTableData()
}
const handleCurrentChange = (val) => {
  queryData.value.currentPage = val
  getTableData()
}

const handleVendorEdit = (field, val, row) => {
  let msg = '是否确认禁用？'
  if (row.isMainAccount == 1) {
    msg = '主账号禁用会禁用掉所有子账号！是否确认操作？'
  }
  ElMessageBox.confirm(`<div><p style="font-size: 16px;margin-bottom: 15px;">${msg}</p></div>`, '操作确认', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    let res = await updateUserState({ userId: row.id, [field]: val })
    if (res.code == 20000) {
      ElMessage({
        showClose: true,
        message: '操作成功',
        type: 'success',
      })
      getTableData()
    }
  })
}
</script>
<style lang="scss" scoped>
.supplier-audit {
  // margin-top: 10px;
  // border-radius: 6px;
  // box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  // padding: 20px 20px 30px;
  // background-color: #ffffff;
  .title-tip {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin-top: 30px;
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
  .form-data {
    padding: 0;
    li {
      display: flex;
      align-items: center;
      margin-top: 20px;
      padding-left: 30px;
      .label {
        font-size: 14px;
        line-height: 1;
        color: #333333;
        width: 116px;
        text-align: left;
        margin-right: 40px;
        white-space: nowrap;
      }
      .value {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 1;
        .img {
          position: relative;
          background-color: #885a5a;
          width: 160px;
          height: 91px;
          margin-right: 20px;
          cursor: pointer;
          .el-image {
            width: 100%;
            height: 100%;
          }
          .bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            pointer-events: none;
          }
        }
        .small-img {
          width: 30px;
          height: 30px;
          vertical-align: middle;
          margin-right: 20px;
          & ~ a.download {
            line-height: 30px;
          }
        }
        a.download {
          color: $mainColor;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
  .footer-button {
    padding-left: 156px;
    margin-top: 40px;
  }
}
</style>